import {useState} from 'react'
import { Button,Notification } from 'tdesign-react';
import 'tdesign-react/es/style/index.css'
import './login.less'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
export default function Login() {
    let navigate=useNavigate()
    let [name,setName]=useState('')
    let [pwd,setPwd]=useState('')
    let [err,setErr]=useState(false)
    let login=async()=>{
        let {data}=await axios.post('http://localhost:3000/login',{username:name,password:pwd})
        console.log(data);
        if(data.code===200){
            sessionStorage.setItem('token',data.data.password)
            sessionStorage.setItem('id',data.data._id)
            navigate('/home')
        }else{
            setErr(true)
        }
    }
  return (
    <div className='boxs'>
        <div className='box'>
            <div className='title'>登录</div>
            <div className='input-box'>
                用户名：<input type='text' value={name} onChange={(e)=>setName(e.target.value)} placeholder='请输入用户名'/>
            </div>
            <div className='input-box'>
                密码：<input type='password' value={pwd} onChange={(e)=>setPwd(e.target.value)} placeholder='请输入密码'/>
            </div>
            <div className='btn-box'>
            <Button theme="primary" variant="base" onClick={login}>
                登录
            </Button>
            <a href="/zhuce" className='a'>如果没有就先注册</a>
            </div>
        </div>
        <Notification
            theme="error"
            title="登录失败"
            className={err?'error-notification' :'error-notification_xiao'}
            duration={200}
            closeBtn={true}
            onCloseBtnClick={() => {
                setErr(false);
            }}
            onDurationEnd={() => {
                setErr(false);
            }}
        />
    </div>
  )
}
